<template>
  <div class="p-3">
    <d-table
      ref="table"
      row-key="dictCode"
      :params="formData"
      :columns="columns"
      api="system/dict/data/list"
      :hasColumnControl="false"
    >
      <template #topContent>
        <t-form class="table-form" :data="formData" layout="inline" @submit="getData">
          <t-form-item label="字典标签">
            <t-input v-model="formData.dictLabel" placeholder="请输入字典标签" clearable></t-input>
          </t-form-item>
          <t-form-item label="状态">
            <t-select
              v-model="formData.status"
              placeholder="字典状态"
              :options="statusList"
              clearable
            >
            </t-select>
          </t-form-item>
          <t-button type="submit">搜索</t-button>
          <t-button class="ml-3" @click="handleEdit()">新增字典</t-button>
        </t-form>
      </template>
      <template #operation="{ row }">
        <t-link theme="primary" hover="color" @click="handleEdit(row)"> 编辑 </t-link>
        <d-pop-btn class="ml-2" tips="是否确认删除该字典？" @click="handleDel(row)">删除</d-pop-btn>
      </template>
    </d-table>
    <add ref="dialog" @success="getData" />
  </div>
</template>

<script setup lang="jsx">
import add from './subAdd.vue'
import { ref, computed } from 'vue'
import { del, jsonToObj } from '@common'
import { useDict } from '@/store/dict'
import { MessagePlugin } from 'tdesign-vue-next'
import { useRoute } from 'vue-router'
const route = useRoute()
const table = ref(null)
const dictType = route.query.dictType
const formData = ref({
  dictType
})
const dialog = ref(false)
const dict = useDict()
const statusList = computed(() => {
  return dict.dict_enable_list
})
const columns = computed(() => {
  return [
    { title: '序号', colKey: 'dIndex', width: 60 },
    {
      title: '字典标签',
      colKey: 'dictLabel',
      width: 170,
      ellipsis: true
    },
    { title: '字典键值', colKey: 'dictValue', width: 170, ellipsis: true },
    { title: '字典排序', colKey: 'dictSort', width: 90 },
    {
      title: '状态',
      colKey: 'status',
      width: 80,
      cell: (_, { row }) => {
        const { status } = row
        return <d-status list={statusList.value} value={status} />
      }
    },
    {
      title: '备注',
      colKey: 'remark',
      width: 160,
      ellipsis: true,
      cell: (_, { row }) => {
        const remark = jsonToObj(row?.remark)?.remark || ''
        return remark
      }
    },
    { title: '创建时间', colKey: 'createTime', width: 170 },
    { title: '操作', colKey: 'operation', width: 100 }
  ]
})
const getData = async () => {
  table.value.getData()
}
const handleEdit = (row) => {
  dialog.value.show({
    dictType,
    ...row
  })
}
const handleDel = async (item) => {
  await del(`system/dict/data/${item.dictCode}`)
  MessagePlugin.success('删除成功')
  getData()
}
</script>
